<template>
  <div class="con">
    <p class="textSty">
      ※平台中存在与以下欠薪诉求为同一号码的最近一条诉求为"无效件”,如需对以下欠薪诉求设置为"无效件”，请完成设置后，点击“继续导入”。
    </p>
    <div class="butBoxSty">
      <el-button
        class="commonBut saveBtn funComBut bzjAddJc"
        @click="allSetting"
      >
        全部设置为无效
      </el-button>
      <el-button
        class="commonBut saveBtn funComBut bzjAddJc"
        @click="batchSetting"
      >
        批量设置
      </el-button>
    </div>
    <div>
      <el-table
        :max-height="tableHeight"
        :data="wxShowTableList"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="loading"
        style="border: 1px solid #dfe6ec"
        :row-key="recordId"
        ref="multipleTable"
        @select-all="selectAll"
        @select="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column
          prop="numId"
          label="案件公文号"
          align="center"
          :formatter="formatTd"
          width="230"
        ></el-table-column>
        <el-table-column
          label="来话内容"
          align="left"
          :formatter="formatTd"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.complaintContent"
              :columnName="'complaintContent'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="complaintPerName"
          label="市民姓名"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="complaintPerTel"
          label="市民电话"
          align="center"
          :formatter="formatTd"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="areaName"
          label="区域"
          align="center"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="complaintEndDate"
          label="规定完成时间"
          align="center"
          :formatter="formatTd"
          width="230"
        ></el-table-column>
        <el-table-column
          prop="invalid"
          label="是否无效件"
          align="center"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.invalid == '0' ? '否' : '是' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格数据为空时，页面显示 -->
      <div slot="empty" v-show="isShow">
        <emptyTable emptyText="暂无相关信息"></emptyTable>
      </div>
      <!-- <Pagination ref="pagination" @getList="getTableList"  :requestUrl="requestUrl"></Pagination> -->
      <el-pagination
        style="margin: 24px 0; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSizeNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="wxShowTableList.length"
      ></el-pagination>
    </div>
    <div class="mainConBottom">
      <el-button
        class="saveBtn"
        v-sdc
        @click="continueExportIn"
        :loading="exportInLoading"
        >设置完成，继续导入</el-button
      >
      <el-button @click="cancleStepExportIn" v-sdc>取消导入</el-button>
    </div>
    <el-dialog
      title="批量设置"
      :visible.sync="batchSettings"
      @close="closeDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="500px"
    >
      <el-form :model="formData" ref="batchBox">
        <el-form-item label="是否无效件:" :label-width="formLabelWidth">
          <el-radio-group v-model="formData.invalidRadio">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveSettings"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'invalidPiece',
  props: {
    wxList: {
      type: Array,
    },
  },
  data() {
    return {
      loading: false,
      isShow: false, //列表加载
      activedList: [],
      canLogin: false,
      batchSettings: false,
      formData: {
        invalidRadio: '0',
      },
      exportInLoading: false,
      pageNo: 1,
      pageSizeNo: 5,
      wxShowTableList: [],
    }
  },
  created() {
    this.wxShowTableList = this.wxList.filter((item, index) => {
      return (
        index >= (this.pageNo - 1) * this.pageSizeNo &&
        index < this.pageNo * this.pageSizeNo &&
        item.isShow == '1'
      )
      // this.$set(item, 'showEditBtn', true)
    })
  },
  mounted() {
    this.pageNo = 1
    this.pageSizeNo = 5
  },
  watch: {},
  methods: {
    //列表多选选中事件
    recordId(row) {
      return row.numId
    },
    selectionChange(rows, row) {
      var selected = rows.length && rows.indexOf(row) !== -1
      if (selected) {
        this.activedList = rows
      } else {
        this.activedList.forEach((item, i) => {
          if (item.numId == row.numId) {
            this.activedList.splice(i, 1)
          }
        })
      }
    },
    selectAll(selection) {
      this.activedList = selection
      if (selection) {
        selection.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 批量设置
    batchSetting() {
      if (this.activedList.length > 0) {
        this.batchSettings = true
      } else {
        this.$message({
          type: 'error',
          message: '请勾选需要设置的人员',
        })
      }
    },
    // 取消
    closeDialog() {
      this.$refs['batchBox'].resetFields()
      this.batchSettings = false
    },
    // 批量设置保存
    saveSettings() {
      this.canLogin = true
      this.saveAjax()
    },
    saveAjax() {
      this.activedList.map((item) => {
        if (this.formData.invalidRadio == '1') {
          item.invalid = '1'
        } else {
          item.invalid = '0'
        }
      })
      this.wxShowTableList.forEach((item, index) => {
        this.activedList.forEach((itemChild, i) => {
          if (item.numId == itemChild.numId) {
            this.wxShowTableList[index].invalid = this.activedList[i].invalid
          }
        })
      })
      this.canLogin = false
      this.batchSettings = false
      this.wxShowTableList = this.wxShowTableList.filter((item, index) => {
        return (
          index >= (this.pageNo - 1) * this.pageSizeNo &&
          index < this.pageNo * this.pageSizeNo
        )
      })
    },
    // 全部设置无效件
    allSetting() {
      this.$confirm('是否确认全部设置为"无效件"？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.wxShowTableList.map((item) => {
            item.invalid = '1'
          })
          this.canLogin = false
          this.batchSettings = false
          this.wxShowTableList = this.wxShowTableList.filter((item, index) => {
            return (
              index >= (this.pageNo - 1) * this.pageSizeNo &&
              index < this.pageNo * this.pageSizeNo
            )
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    cancleStepExportIn() {
      this.$emit('cancleExportIn')
    },
    handleSizeChange(val) {
      this.pageNo = 1
      this.pageSizeNo = val
      this.wxShowTableList = this.wxShowTableList.filter((item, index) => {
        return (
          index >= (this.pageNo - 1) * this.pageSizeNo &&
          index < this.pageNo * this.pageSizeNo
        )
      })
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.wxShowTableList = this.wxShowTableList.filter((item, index) => {
        return (
          index >= (this.pageNo - 1) * this.pageSizeNo &&
          index < this.pageNo * this.pageSizeNo
        )
      })
    },
    continueExportIn() {
      this.$emit('sureExportIn', this.wxList)
    },
  },
}
</script>

<style scoped lang="less">
.con {
  padding: 24px;
  .textSty {
    // margin-left: 46px;
  }
  .butBoxSty {
    padding: 24px 0px;
  }
}
.mainConBottom {
  text-align: center;
}
</style>
